<template>
	<div class="news-info">
		<el-collapse-transition>	
     <div class="cal-count" v-if="show">
		 <!-- <div class="c-cou-left"><img src="~assets/img/calcount.png" width="50px" alt=""></div> -->
		 <div class="c-cou-right">
			 <span>{{sum1}}单</span>
			 <span>今日销售总量</span>
		 </div>
	 </div>
	 </el-collapse-transition>
	 <el-collapse-transition>
		 <div class="cal-count" v-if="show">
		 		 <!-- <div class="c-cou-left"><img src="~assets/img/calperson.png" width="50px" alt=""></div> -->
		 		 <div class="c-cou-right">
		 		 			 <span>{{sum2}}人</span>
		 		 			 <span>新增用户数量</span>
		 		 </div>
		 </div>
	 </el-collapse-transition>
	
	 <el-collapse-transition>
	 		 <div class="cal-count" v-if="show">
	 		 		 <!-- <div class="c-cou-left"><img src="~assets/img/calorder.png" width="50px" alt=""></div> -->
	 		 		 <div class="c-cou-right">
	 		 		 			 <span>{{sum3}}单</span>
	 		 		 			 <span>昨日销售总量</span>
	 		 		 </div>
					 </div>
	 </el-collapse-transition>
	 
	</div>
</template>

<script>
	export default {
		
		data(){
			return {
				 show: false,
				calCount: 12387,
				calPerson: 5421,
				calOrder: 6575,
				sum1:0,
				sum2:0,
				sum3:0
			}
		},
		methods:{
			countdown: function() {
			    let that = this;
			    let interval = window.setInterval(function() {
				if(that.sum1<=that.calCount){
					that.sum1= that.sum1+Math.round(that.calCount*0.006)
				}
				if(that.sum2<=that.calPerson){
					that.sum2= that.sum2+Math.round(that.calPerson*0.006)
				}
				if(that.sum3<=that.calOrder){
					that.sum3= that.sum3+Math.round(that.calOrder*0.006) 
				}
			    }, 0);
			}	
		},
		mounted() {
			this.countdown()
			this.show =true
		}
		
	}
</script>

<style scoped lang="scss">
	.news-info {
		margin: 0 auto;
		width: 70%;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 3px solid #ddd;
		.cal-count {
			display: flex;
			width: 300px;
			height: 80px;
			.c-cou-right {
				display: flex;
				flex-direction: column;
				align-items: center;
				span {
					margin: 0 80px;
					color: #aaa;
				}
				span:nth-child(1) {
					font-size: 25px;
					color: #FBC000;
					font-weight: bold;
				}
			
			}
		}
		}
		
</style>

